<template>
    <div class="home">
    <div class="header">首行</div>
    <div class="carousel">轮播图</div>
    <div class="text">
        <div class="t1">文本一</div>
        <div class="t2">文本二</div>
        <div class="t3">文本三</div>
    </div>
    <div class="footer">尾部</div>
    </div>
</template>

<script>
export default {
    name: 'HomeIndex'
}
</script>

<style scoped>
.home {
    color: red;
    height: 90vh;
    border:2px solid orange;
    box-shadow: 5px 3px snow 2px;
    margin:0 auto;
}
.header,.footer{
    height: 14%;
    background-color: greenyellow;
    border:2px solid orange;
    margin:0 auto;
    box-shadow: 5px 3px snow 2px;
    text-align: center;
}
.carousel{
    height: 30%;
    background-color: burlywood;
    border:2px solid orange;
    margin:0 auto;
    box-shadow: 5px 3px snow 2px;
    text-align: center;
}
.text{
    height: 40%;
    background-color: burlywood;
    border:2px solid orange;
    margin:0 auto;
    box-shadow: 5px 3px snow 2px;
}
.text .t1,.t2,.t3{
    height: 100%;
    width: 33%;
    float: left;
    background-color: skyblue;
    border: 1px solid orange;
}

</style>